<!--
 * @Descripttion: 
 * @version: xxx
 * @Author: xgh
 * @Date: 2023-06-08 16:11:00
 * @LastEditors: xgh
 * @LastEditTime: 2023-06-08 16:50:05
-->
<template>
  <div id="myChart" :style="{width: '1500px', height: '500px'}"></div>
</template>
<script>
  import {
    ListHots
  } from "@/api/film";
  export default {
    name: 'show',
    data() {
      return {
        total: []
      }
    },
    mounted() {
      //获取热门电影      
      ListHots().then(res => {
        this.total = res.data
        this.drawLine()
      })
    },
    methods: {
      drawLine() {

        let hotlist = this.total.map((item) => item.hot)
        let movielist = this.total.map(item => item.name)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          barWidth: 40,
          title: {
            text: '电影热度top10展示'
          },

          tooltip: {},
          legend: {
            data: ['热度']
          },
          xAxis: {
            type: 'category',
            data: movielist
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            itemStyle: {
              color: "#72C0DE"
            },
            data: hotlist,
            type: 'bar',

            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }]
        });
      }
    }
  }
</script>


<style scoped>
  #myChart {
    margin-top: 100px;

  }
</style>